<template>
  <div class="box">
    <JsContentTitle
      :pageTitle="state.pageTitle"
      :buttonData="state.buttonData"
    ></JsContentTitle>
    <div class="contentView">
      <JsTable
        :toolBar="state.toolBar"
        :total="state.totalCount"
        :dataSource="state.dataSource"
        :columns="state.columns"
        :refresh="state.refresh"
        @selectionChange="selectionChange"
        @search="searchEvent"
      >
      </JsTable>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'

//第一列勾选框勾选触发
const selectionChange = (list:any) =>{
    console.log(list)
}
onMounted(() => {
  state.value.refresh = 1//刷新列表执行searchEvent方法
})

//搜索
const searchEvent = (params: any) => {
    //params包含page、pagesize、state.value.toolBar.form内容
  console.log(params)
  state.value.dataSource = [
    {
      l1: '1111',
      l2: '1111',
      l3: '1111',
      l4: true,
    },
  ]
  state.value.refresh = 0//重新置成0，否则下次刷新不执行
}

//编辑
const editEvent = (row: any) => {
  console.log(row)
}

//详情
const detailEvent = (row: any) => {
  console.log(row)
}

//删除
const deleteEvent = (row: any) => {
  console.log(row)
}

//重置
const resetEvent = () => {
  Object.keys(state.value.toolBar.value.form).forEach((key: string) => {
    state.value.toolBar.value.form[key] = ''
  })
  state.value.refresh = 1
}

const state = ref({
  buttonData: [],
  refresh: 0,
  totalCount: 0,
  pageTitle: '列表模板',
  columns: {
    selection:true,//第一列是否勾选
    props: [
      {
        name: '列1',
        key: 'l1',
      },
      {
        name: '列2',
        key: 'l2',
      },
      {
        name: '列3',
        key: 'l3',
      },
      {
        name: '列4',
        key: 'l4',
      },
    ],
    options: {
      width:300,
      btns: [
        {
          label: '编辑',
          key: 'edit',
          type: 'warning',
          event: editEvent,
        },
        {
          label: '详情',
          key: 'reset',
          event: detailEvent,
        },
        {
          label: '删除',
          key: 'delete',
          type: 'danger',
          event: deleteEvent,
        },
      ],
    },
  },
  dataSource: [],
  toolBar: {
    form: {
      s1: '',
      s2: '',
      s3: '',
    },
    input: [
      {
        label: '输入框',
        key: 's1',
        placeholder: '请输入',
        el: 'input',//输入框
      },
      {
        label: '下拉框',
        key: 's2',
        placeholder: '请选择',
        el: 'select',//下拉框
      },
      {
        label: '时间',
        key: 's3',
        placeholder: '请选择',
        el: 'datePicker',//时间选择
        type: 'datetimerange',
      },
    ],
    btns: [
      {
        label: '查询',
        icon: 'Search',
        event: searchEvent,
      },
      {
        label: '重置',
        event: resetEvent,
      },
    ],
  },
} as any)
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
  display: none;
  width: 10px;
}
.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .contentView {
    background-color: white;
    border-radius: 5px;
    height: calc(100vh - 144px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
